<template>
  <div>
    <div class="indexUser">
      <div>
        <!-- header  点击 -->
        <headers :userList="userList"></headers>
      </div>
      <div class="bg1 userBox">
        <div class="wrap bgw archives">
          <div class="nav">
            <div @click="navTab = 0" :class="{navActive: navTab == 0}">我的档案</div>
            <div @click="navTab = 1,type =0" :class="{navActive: navTab == 1}">添加档案</div>
          </div>
          <div v-if="navTab == 0">
            <div v-for="(v,i) in list" :key="i" class="box1">
              <div class="titleList">
                <div>姓名</div>
                <div>年龄</div>
                <div>性别</div>
                <div>身高</div>
                <div>操作</div>
              </div>
              <div class="userList">
                <div>{{v.realname}}</div>
                <div>{{v.birthday}}</div>
                <div v-if="v.sex == 0">男</div>
                <div v-if="v.sex == 1">女</div>
                <div>{{v.height}}</div>
                <div>
                  <span @click="txt(v)">编辑</span>
                  <span @click="removeData(v)">删除</span>
                </div>
              </div>
            </div>
          </div>
          <div v-if="navTab == 1">
            <div class="settxt">
              <div class="addRecord_box">
                <div @click.stop class="ar_box">
                  <div class="ar_txt">
                    <div class="ar_txts">
                      姓
                      <i></i>
                      <i></i>
                      <i></i>
                      <i></i> 名
                    </div>
                    <input v-model="name" type="text" maxlength="12" />
                  </div>
                  <div class="ar_txt">
                    <div class="ar_txts">
                      性
                      <i></i>
                      <i></i>
                      <i></i>
                      <i></i> 别
                    </div>
                    <div class="as">
                      <el-radio v-model="sex" label="0">男</el-radio>
                      <el-radio v-model="sex" label="1">女</el-radio>
                    </div>
                  </div>
                  <div class="ar_txt w60">
                    <div class="ar_txts" style="line-height:40px">
                      年
                      <i></i>
                      <i></i>
                      <i></i>龄
                    </div>
                    <el-date-picker
                      v-model="age"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </div>
                  <div class="ar_txt w60">
                    <div class="ar_txts">
                      身
                      <i></i>
                      <i></i>
                      <i></i> 高
                    </div>
                    <input v-model="h" type="text" maxlength="3" />C M
                  </div>
                  <div class="ar_txt w60">
                    <div class="ar_txts">
                      体
                      <i></i>
                      <i></i>
                      <i></i> 重
                    </div>
                    <input v-model="kg" type="text" maxlength="3" />K G
                  </div>
                  <div class="ar_txt">
                    <div class="ar_txts">联系方式</div>
                    <input v-model="mobile" type="text" maxlength="11" />
                  </div>
                  <div class="ar_txt">
                    <div class="ar_txts">
                      过
                      <i></i>敏
                      <i></i>史
                    </div>
                    <textarea v-model="guominshi"></textarea>
                  </div>
                  <div class="ar_txt">
                    <div class="ar_txts">
                      遗
                      <i></i>传
                      <i></i>史
                    </div>
                    <textarea v-model="yichuanshi"></textarea>
                  </div>
                  <div class="ar_txt">
                    <div class="ar_txts">病情情况</div>
                    <textarea v-model="bingqing"></textarea>
                  </div>
                  <div class="ar_txt">
                    <div class="ar_txts">
                      附
                      <i></i>
                      <i></i>
                      <i></i> 件
                    </div>
                    <div v-if=" imgs!=='' " class="imgArr">
                      <div
                        @click="removeImgaa(v)"
                        @mouseover="dele_icon =i"
                        @mouseout="dele_icon = -1"
                        v-for="(v,i) in imgs"
                        :key="i"
                      >
                        <div :class="{rgb6:dele_icon==i}" v-show="dele_icon == i">
                          <i class="el-icon-delete"></i>
                        </div>

                        <img :src="v" alt />
                      </div>
                    </div>
                    <el-upload
                      :action="imageUrl"
                      list-type="picture-card"
                      :on-success="ListImgSuccess"
                      :before-upload="beforeAvatarUpload"
                      :on-remove="ListImgRemove"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </div>
                  <div class="ar_txt">
                    <div class="ar_txts"></div>
                    <button @click="checking()">保存档案</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <publicBottom></publicBottom>
      </div>
    </div>
  </div>
</template>
<script>
import headers from "./header"; // 头部 TOP 和header
import publicBottom from "@/components/public/public_bottom"; //底部
import { usergetinfo } from "@/request/user";
import { add_dangan } from "@/request/user";
import { dangan_getList } from "@/request/user";
import { del_dangan } from "@/request/user";
export default {
  components: {
    headers,
    publicBottom
  },
  data() {
    return {
      userList: [], // 个人信息
      dele_icon: -1, //编辑 档案
      navTab: 0, // 列表 还是 新增
      name: "", // 姓名
      sex: "0", //0男   1 女
      age: "",
      h: "",
      kg: "",
      mobile: "",
      guominshi: "",
      yichuanshi: "",
      bingqing: "",
      imgArr: [], //资质证明 图的 list
      imgs: [], //编辑 档案 的图片 列表
      list: [], // 档案 列表
      type: 0,
      ids: ""
    };
  },
  created() {
    let datas = localStorage.getItem("lzyyToken");
    let Athis = this;
    if (datas != null) {
      this.$tokens = datas;
    } else {
      this.$message.error("登录错误，请重新登录");
      setTimeout(function() {
        Athis.$router.replace({ path: "/land" });
      }, 1000);
    }

    this.init();
    // this.state=this.$route.query.state
    this.start();
  },
  methods: {
    removeImgaa(e) {
      var index = this.imgs.indexOf(e);
      if (index > -1) {
        this.imgs.splice(index, 1);
      }
      console.log(this.imgs);
    },
    txt(e) {
      this.name = e.realname;
      e.sex = String(e.sex);
      this.sex = e.sex;
      this.age = e.birthday;
      this.h = e.height;
      this.kg = e.weight;
      this.mobile = e.mobile;
      this.guominshi = e.allergy;
      this.yichuanshi = e.genetic_disease;
      this.bingqing = e.disease_desc;
      this.imgs = e.report_arr;
      this.ids = e.id;
      this.type = 1;
      this.navTab = 1;
    },
    removeData(e) {
      del_dangan({
        token: this.$tokens,
        id: e.id
      }).then(res => {
        if (res.code == 1) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.start();
        }
      });
    },
    start() {
      dangan_getList({
        token: this.$tokens
      }).then(res => {
        this.list = res.data.data;
        for (let i = 0; i < this.list.length; i++) {
          let time = this.list[i].birthday;
          time = time * 1000;
          var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
          var Y = date.getFullYear() + "-";
          var M =
            (date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1) + "-";

          var D =
            (date.getDate() + 1 < 10
              ? "0" + (date.getDate() + 1)
              : date.getDate() + 1) + "-";
          var h = date.getHours() + ":";
          var m = date.getMinutes() + ":";
          var s = date.getSeconds();
          let times = Y + M + D + h + m + s;
          times = times.substr(0, 10);
          this.list[i].birthday = times;
        }
      });
    },
    checking() {
      if (this.name == "") {
        this.$message.error("姓名不能为空");
      } else if (this.age == "") {
        this.$message.error("年龄不能为空");
      } else if (this.h == "") {
        this.$message.error("身高不能为空");
      } else if (this.kg == "") {
        this.$message.error("体重不能为空");
      } else if (this.mobile == "") {
        this.$message.error("联系方式不能为空");
      } else if (this.guominshi == "") {
        this.$message.error("过敏史不能为空");
      } else if (this.yichuanshi == "") {
        this.$message.error("遗传史不能为空");
      } else if (this.bingqing == "") {
        this.$message.error("病情不能为空");
      } else if (this.bingqing == "") {
        this.$message.error("病情不能为空");
      } else {
        if (this.type == 0) {
          this.send();
        } else {
          this.sends();
        }
      }
    },
    send() {
      let imgData = [];
      if (this.imgArr != "") {
        for (let i = 0; i < this.imgArr.length; i++) {
          imgData.push(this.imgArr[i].url);
        }
        imgData = imgData.join(",");
      }
      add_dangan({
        token: this.$tokens,
        realname: this.name,
        mobile: this.mobile,
        sex: this.sex,
        birthday: this.age,
        weight: this.kg,
        height: this.h,
        allergy: this.guominshi,
        genetic_disease: this.yichuanshi,
        disease_desc: this.bingqing,
        report_urls: imgData
      }).then(res => {
        if (res.code == 1) {
          this.imgArr = [];
          this.start();
          this.navTab = 0;
          this.$message({
            message: "保存成功",
            type: "success"
          });
        }
      });
    },
    sends() {
      let imgData1 = [];
      for (let i = 0; i < this.imgArr.length; i++) {
        imgData1.push(this.imgArr[i].url);
      }
      let imgData2 = this.imgs;
      let imgas = [...imgData1, ...imgData2];
      imgas = imgas.join(",");
      add_dangan({
        token: this.$tokens,
        id: this.ids,
        realname: this.name,
        mobile: this.mobile,
        sex: this.sex,
        birthday: this.age,
        weight: this.kg,
        height: this.h,
        allergy: this.guominshi,
        genetic_disease: this.yichuanshi,
        disease_desc: this.bingqing,
        report_urls: imgas
      }).then(res => {
        if (res.code == 1) {
          this.imgArr = [];
          this.start();
          this.navTab = 0;
          this.$message({
            message: "保存成功",
            type: "success"
          });
        }
      });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //   资质证明 图的 list
    ListImgSuccess(response, file, fileList) {
      let imgurl = response.data.file.url;
      file.url = imgurl;
      this.imgArr = fileList;
    },
    //   资质证明 删除
    ListImgRemove(file, fileList) {
      this.imgArr = fileList;
    },
    init() {
      //   个人信息
      usergetinfo({
        token: this.$tokens
      }).then(res => {
        this.userList = res.data;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.imgArr {
  display: inherit;
  > div {
    margin-right: 20px;
    display: inherit;
    position: relative;
    width: 148px;
    height: 148px;
  }
  i {
    color: white;
    width: 30px;
    height: 30px;
    font-size: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .rgb6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 148px;
    height: 148px;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
  }
  img {
    display: inline-block;
    border-radius: 6px;
    width: 148px;
    height: 148px;
  }
}
.addRecord_box {
  padding-left: 40px;
  padding-bottom: 80px;
  .ad_title {
    line-height: 40px;
    height: 40px;
    background: rgba(247, 247, 247, 1);
    font-size: 14px;
    padding-left: 12px;
    padding-right: 12px;
    position: relative;
    .none {
      position: absolute;
      right: 24px;
      top: 14px;
      width: 14px;
      height: 14px;
    }
  }
  .ar_box {
    padding-left: 30px;
    font-size: 14px;
    padding-top: 20px;
    i {
      margin-right: 8px;
    }
    .ar_txt {
      font-size: 14px;
      margin-bottom: 24px;
      line-height: 24px;
      display: flex;
    }
    .ar_txts {
      width: 80px;
    }
    input {
      width: 150px;
      height: 24px;
      border: 1px solid rgba(228, 228, 228, 1) !important;
    }
    textarea {
      width: 268px;
      height: 48px;
      border: 1px solid rgba(228, 228, 228, 1) !important;
    }
    p {
      width: 174px;
      height: 52px;
    }
    button {
      width: 174px;
      height: 52px;
      font-size: 22px;
    }
    .w60 input {
      width: 60px;
      margin-right: 20px;
    }
  }
}
.titleList {
  height: 66px;
  background: rgba(246, 246, 246, 1);
  display: flex;
  > div {
    width: 20%;
    text-align: center;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 66px;
  }
}
.userList {
  height: 92px;
  display: flex;
  > div {
    width: 20%;
    text-align: center;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 92px;
    span {
      display: inline-block;
      text-align: center;
      width: 30%;
    }
    span:nth-of-type(1) {
      color: #4eeec8;
    }
    span:nth-of-type(2) {
      color: #ee4e4e;
    }
  }
}
.box1 {
  width: 1132px;
  margin-left: 34px;
  margin-top: 20px;
  border: 1px solid #e6e6e6;
}
.nav {
  height: 68px;
  border-bottom: 1px solid #e6e6e6;
  font-size: 18px;
  padding-left: 20px;
  display: flex;
  > div {
    line-height: 68px;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    cursor: Pointer;
  }
}
.archives {
  min-height: 690px;
}
.navActive {
  color: #4eeec8;
}
</style>